<script setup>
import { onBeforeUnmount, ref } from 'vue'
import { useAudioStore } from '@/stores/audioStore'
import LayoutControl from '@/views/Layout/components/LayoutControl.vue'
import FullPhonorecord from './components/FullPhonorecord.vue'
import FullSongLyric from './components/FullSongLyric.vue'
import FullComment from './components/FullComment.vue'
import FullPostComment from './components/FullPostComment.vue'
import { onMounted } from 'vue'

const useAudio = useAudioStore()
const fullControl = ref(null)
// 根据滚动条高度显示'回到顶部'的悬浮框
const isShowBox = ref(false)
onMounted(() => {
  fullControl.value.addEventListener('scroll', watchScrollFn)
})
const watchScrollFn = () => {
  const top = fullControl.value.scrollTop
  if (top > 300) {
    isShowBox.value = true
  } else {
    isShowBox.value = false
  }
}

// 获取分页评论后调整滚动条高度，定位至评论展示组件的头部
const changeScroll = (top) => {
  fullControl.value.scrollTop = top - 50
}

// 回到顶部
const toTop = () => {
  const timer = setInterval(() => {
    let top = fullControl.value.scrollTop
    if (top < 1) {
      clearInterval(timer)
    } else {
      fullControl.value.scrollTop = top / 2
    }
  }, 50)
}

// 清除 scroll 侦听器
onBeforeUnmount(() => {
  fullControl.value.removeEventListener('scroll', watchScrollFn)
})

</script>

<template>
  <div class="layut-full-control" ref="fullControl">
    <div class="show-song-status">
      <FullPhonorecord />
      <FullSongLyric />
      <div class="comment-tips iconfont icon-xiangxia"></div>
    </div>
    <FullComment class="full-comment" @changeScroll="changeScroll" :id="useAudio.songResult.id" :type="0" />
  </div>
  <LayoutControl />
  <div class="right-box up" @click="toTop" title="回到顶部" v-show="isShowBox">
    UP
  </div>
  <div class="right-box comment" title="发表评论" v-if="useAudio.songResult.id" v-show="isShowBox">
    <FullPostComment :id="useAudio.songResult.id" :type="0" :name="useAudio.activeSongList[useAudio.activeIndex].name || ''" />
  </div>
</template>

<style scoped lang='scss'>
.layut-full-control {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 80px;
  overflow: auto;

  .show-song-status {
    position: relative;
    margin: 0 auto;
    max-width: 1165px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;

    .comment-tips {
      position: absolute;
      font-size: 26px;
      bottom: 10px;
      left: 100px;
      right: 100px;
      text-align: center;
      animation: comment-tips-animation 8s infinite linear
    }

    @keyframes comment-tips-animation {
      0% {
        opacity: 0;
      }

      30% {
        opacity: 0.8;
      }

      50% {
        opacity: 1;
      }

      70% {
        opacity: 0.8;
      }

      100% {
        opacity: 0;
      }
    }
  }
  .full-comment {
    width: 900px;
  }
}

.right-box {
  height: 50px;
  width: 50px;
  position: absolute;
  background-color: #fff;
  box-shadow: 0px 0px 10px #ddd;
  text-align: center;
  line-height: 50px;
  border-radius: 3px;
  color: $sucColor;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
}

.up {
  right: 100px;
  bottom: 100px;
}

.comment {
  right: 100px;
  bottom: 180px;
}
</style>
